<template>
  <img :src="info?.imageUrl" alt="" class="image">
  <div class="container">
    <div class="info">
      <div class="price">
        <span class="now">￥{{ info?.price }}</span>
        <span class="pass">￥{{ info?.marketPrice }}</span>
      </div>
      <h1 class="title">{{ info.name }}</h1>
      <h2 class="language">{{ info?.floralLanguage }}</h2>
    </div>
    <div class="list">
      <img :src="item" v-for="item in info?.detailList" alt="">
    </div>
  </div>

  <div class="bottom">
    <div class="bottom-info" @click="toHome">
      <img src="../assets/images/h1.png" alt="">
      <span>首页</span>
    </div>
    <div class="bottom-info" @click="toShopCar">
      <img src="../assets/images/h3.png" alt="">
      <span>购物车</span>
    </div>
    <div class="bottom-info" @click="handle1">
      <img src="../assets/images/message.png" alt="">
      <span>客服</span>
    </div>
    <div class="btnl" @click="handle1">加入购物车</div>
    <div class="btnr" @click="handle1">立即购买</div>
  </div>
</template>

<script setup lang="ts">
import { reqGoodsDetail } from '@/api';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { productInfo } from '../types/index'
const route = useRoute()
const router = useRouter()
const id: any = route.query.id
let info = ref<productInfo>({
  id: 0,
  isDeleted: 0,
  category1Id: 0,
  category2Id: 0,
  name: '',
  price: 0,
  marketPrice: 0,
  saleCount: 0,
  stockCount: 0,
  imageUrl: '',
  floralLanguage: '',
  applyUser: '',
  material: '',
  packing: '',
  isRecommend: 0,
  detailList: []
})

//获取商品详情
const getGoodsDetail = async () => {
  const res = await reqGoodsDetail(id)
  info.value = res.data
}
//返回首页
const toHome = () => {
  router.push('/')
}
const toShopCar = ()=>{
  router.push('/shopcar')
}
const handle1 = () => {
  alert('此功能暂未开放~，您要招程序员吗？')
}
onMounted(() => {
  getGoodsDetail()
})
</script>

<style scoped lang="less">
.image {
  width: 100%;
}

.container {
  box-sizing: border-box;
  width: 100%;
  background-color: #f7f4f8;
  padding: 0 8px 52px 8px;

  .info {
    background-color: #fff;
    position: relative;
    padding: 20px;
    top: -80px;
    border-radius: 8px;
    height: 85px;

    .price {
      .now {
        font-size: 18px;
        color: #fa4126;
        font-weight: bold;
      }

      .pass {
        font-size: 12px;
        color: #b4babf;
        margin-left: 4px;
        text-decoration: line-through;
        margin-top: 6px;
      }
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .language {
      font-size: 12px;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .list {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: -65px;

    img {
      width: 100%;
    }
  }
}

.bottom {
  width: 100%;
  height: 50px;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  display: flex;
  align-items: center;

  .bottom-info {
    width: 48px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 20px;
      height: 18px;
    }

    span {
      font-size: 12px;
    }
  }
  .btnl,.btnr{
    width: 110px;
    height: 40px;
    border-radius: 20px 0 0 20px;
    line-height: 40px;
    background-image: linear-gradient(90deg,#ffd01e,#ff8917);
    font-size: 16px;
    text-align: center;
    color: #fff;
  }
  .btnr{
    border-radius:0 20px  20px 0;
    background-image: linear-gradient(90deg,#ff5f34,#ef0c25);
  }
}
</style>